<template>
  <div class="configuration-management-new">
    <Row type="flex" justify="space-between" class="configuration-management-new-edit">
      <Form
        ref="formValidate"
        class="from"
        style="width: 100%"
        :model="searchObj"
        :rules="formRuls"
        label-position="left"
        inline
      >
        <FormItem prop="operateType" :label-width="82">
          <span slot="label" style="transform: translateX(12px);">单据操作：</span>
          <!-- <Input style="width:180px" autocomplete="off" placeholder="请输入" /> -->
          <Select style="width:180px" v-model="searchObj.operateType">
            <Option v-for="item in receiptsOption" :label="item.label" :value="item.value" :key="item.value">
              {{ item.label }}
            </Option>
          </Select>
        </FormItem>
        <FormItem prop="orgGuid" :label-width="82">
          <span slot="label" style="transform: translateX(12px);">门店名称：</span>
          <Select @on-change="handleShop" style="width:180px" filterable v-model="searchObj.orgGuid" label-in-value>
            <Option v-for="item in shopList" :label="item.shopName" :value="item.shopId" :key="item.shopId">{{
              item.shopName
            }}</Option>
          </Select>
        </FormItem>

        <FormItem prop="voucherCode" :label-width="82">
          <span slot="label" style="transform: translateX(12px);">单据编号：</span>
          <Input v-model="searchObj.voucherCode" style="width:180px" placeholder="请输入" />
        </FormItem>
        <FormItem>
          <Button class="search-btn" type="primary" @click="search()">读取</Button>
        </FormItem>
      </Form>

      <Row class="table_content" style="background: #F8F8F9; width: 100%;">
        <Row>
          <!-- <Form style="width: 100%;" :label-width="72" label-position="left" inline>
            <Row type="flex" justify="space-between">
              <FormItem :label-width="72">
                <div slot="label" style="transform: translateX(12px);">单据类型：</div>
                <Input class="sort_input" readonly v-model="detail.changeType" placeholder="" />
              </FormItem>
              <FormItem :label-width="72">
                <div slot="label" style="transform: translateX(12px);">入库类型：</div>
                <Input class="sort_input" readonly v-model="detail.goodsTypeName" placeholder="" />
              </FormItem>
              <FormItem :label-width="72">
                <div slot="label" style="transform: translateX(12px);">库房选择：</div>
                <Input class="sort_input" readonly v-model="detail.whName" placeholder="" />
              </FormItem>
              <FormItem :label-width="72">
                <div slot="label" style="transform: translateX(12px);">入库时间：</div>
                <Input class="sort_input" readonly v-model="detail.selectCreated" placeholder="" />
              </FormItem>
              <FormItem :label-width="72">
                <div slot="label" style="transform: translateX(12px);">入库来源：</div>
                <Input class="sort_input" readonly :value="detail.changeItemText" placeholder="" />
              </FormItem>

            </Row>

            <Row type="flex" justify="space-between">
              <FormItem :label-width="72">
                <div slot="label" style="transform: translateX(12px);">收货人：</div>
                <Input class="sort_input" readonly v-model="detail.receiver" placeholder="" />
              </FormItem>
              <FormItem :label-width="72">
                <div slot="label" style="transform: translateX(12px);">发货人：</div>
                <Input class="sort_input" readonly v-model="detail.shipper" placeholder="" />
              </FormItem>

              <FormItem style="visibility:hidden;" :label-width="72">
                <div slot="label" style="transform: translateX(12px);">发货人：</div>
                <Input class="sort_input" readonly placeholder="" />
              </FormItem>
              <FormItem style="visibility:hidden;" :label-width="72">
                <div slot="label" style="transform: translateX(12px);">发货人：</div>
                <Input class="sort_input" readonly placeholder="" />
              </FormItem>
              <FormItem style="visibility:hidden;" :label-width="72">
                <div slot="label" style="transform: translateX(12px);">发货人：</div>
                <Input class="sort_input" readonly placeholder="" />
              </FormItem>
            </Row>
          </Form> -->
          <div style="border: none;" class="ivu-table-wrapper">
            <div class="ivu-table ivu-table-default ivu-table-border">
              <div class="ivu-table-header">
                 <div class="ivu-table ivu-table-default">
                        <table
                          class="table-border-none"
                          cellspacing="0"
                          cellpadding="0"
                          border="0"
                          style="width: 100%;"
                        >
                          <tr class="ivu-table-row table-border-none">
                            <td  class="ivu-table-cell">单据类型：{{detail.changeType}}</td>
                            <td  class="ivu-table-cell">入库类型：{{detail.goodsTypeName}}</td>
                            <td  class="ivu-table-cell">库房选择：{{detail.whName}}</td>
                            <td  class="ivu-table-cell">入库时间：{{detail.selectCreated}}</td>
                          </tr>
                          <tr class="ivu-table-row table-border-none">
                            <td  class="ivu-table-cell">入库来源：{{detail.changeItemText}}</td>
                            <td class="ivu-table-cell">收货人：{{detail.receiver}}</td>
                            <td class="ivu-table-cell">发货人：{{detail.shipper}}</td>
                            <td  class="ivu-table-cell"></td>
                          </tr>
                        </table>
                      </div>
              </div></div></div>

        </Row>

        <Row style="margin-top: 24px;">
          <Table
            :max-height="resData.length > 10 ? 530 : 0"
            :loading="isloading"
            stripe
            :columns="columns"
            :data="resData"
          ></Table>
        </Row>
      </Row>

      <Form :model="searchObj" ref="renarKform" :rules="remarkRules" style="width: 100%;">
        <Row style="margin-top: 24px;">
          <FormItem style="width: 100%;" prop="remark" :label-width="82">
            <span slot="label" style="transform: translateX(12px);">修正说明：</span>
            <Input v-model="searchObj.remark" :maxlength="300" type="textarea" :rows="4" placeholder="请输入 " />
          </FormItem>
        </Row>
        <Row>
          <FormItem style="width: 100%;" :label-width="72">
            <Button class="search-btn" :disabled="disabled" @click="repairAdd" type="primary">作废</Button>
            <Button style="margin-left: 20px;" @click="handleBack" class="search-btn">返回</Button>
          </FormItem>
        </Row>
      </Form>
    </Row>
  </div>
</template>

<script>
// import { getShopList, shopDown, pointDelete } from '@/api/market/pointshop'
// import regExp from '@/libs/regExp'
import { voucherDetail, repairAdd } from '@/api/inventory/supply'
import { getShopList } from '@/api/system/store'
import { routeEqual } from '@/libs/util'
import { Decimal } from 'decimal.js'
import { formatAmount } from '@/libs/tools'
// import dayjs from 'dayjs'
export default {
  name: 'configuration_management_new_receipt',
  data () {
    return {
      searchObj: {
        merchantId: this.$store.state.user.merchantId,
        orgGuid: '',
        voucherCode: '',
        operateType: 1,
        remark: ''
      },

      detail: {},

      receiptsOption: [{ label: '单据作废', value: 1 }],
      // regExp: regExp,
      isloading: false,
      shopList: [],
      total: 0,
      resData: [],
      shopId: '',
      shopName: '',
      formRuls: {
        operateType: [{ required: true, message: '请选择单据操作' }],
        orgGuid: [{ required: true, message: '请选择门店', trigger: 'change' }],
        voucherCode: [{ required: true, message: '请输入单据编号' }]
      },
      remarkRules: {
        remark: [{ required: true, message: '请输入说明' }]
      },
      columns: [
        {
          title: '品名',
          key: 'goodsName',
          align: 'center'
        },
        { title: '规格', key: 'refName', align: 'center' },
        { title: '单位', key: 'quantityUnit', align: 'center' },
        {
          title: '单价',
          key: 'unitPriceSale',
          align: 'center'
        },
        {
          title: '数量',
          key: 'actualQuantity',
          align: 'center'
        },
        { title: '金额',
          key: 'unitPriceSale',
          align: 'center',
          render: (h, params) => {
            return h('span', formatAmount((new Decimal(params.row.unitPriceSale).mul(params.row.actualQuantity).toFixed(2))))
          }
        }
      ]
    }
  },
  computed: {
    disabled () {
      if (JSON.stringify(this.detail) === '{}') return true
      return false
    }
  },
  created () {
    this.getShopList()
  },
  methods: {

    handleShop (val) {
      // console.log(val)
      this.shopName = val.shopName
    },
    search () {
      this.$refs.formValidate.validate(valid => {
        if (valid) this.voucherDetail()
      })
    },
    // 新增
    async repairAdd () {
      this.$refs.renarKform.validate(async (valid) => {
        if (valid) {
          const { merchantId, remark, operateType } = this.searchObj
          const { voucherCode, orgName } = this.detail
          const res = await repairAdd({
            merchantId,
            shopId: this.shopId,
            remark,
            operateType,
            voucherCode,
            creatorName: this.$store.state.user.userName,
            shopName: orgName
          })
          if (res.data.status !== 200) return this.$Message.error(`${res.data.error}`)
          this.$Message.success('成功')
          this.$store.commit('closeTag', this.$route)
          this.$store.commit(
            'setTagNavList',
            this.$store.state.app.tagNavList.filter(item => !routeEqual(this.$route, item))
          )
          this.$nextTick(() => {
            this.$router.push({
              name: 'configuration_management_list'
            })
          })
        }
      })
    },
    handleBack () {
      this.$store.commit('closeTag', this.$route)
      this.$store.commit(
        'setTagNavList',
        this.$store.state.app.tagNavList.filter(item => !routeEqual(this.$route, item))
      )
      this.$nextTick(() => {
        this.$router.push({
          name: 'configuration_management_list'
        })
      })
    },
    async voucherDetail () {
      // let params = {
      //   merchantId: '40ed3fb4-6b8a-4606-9cb3-a1e8bba5584b',
      //   creatorId: '42c68c1f-125a-49f7-8574-17486a1abbe5',
      //   orgGuid: '05b39d14-7d88-4e39-8918-58495203d68a',
      //   voucherCode: 'SBYB236570776377884672' || 'DJTJ236889797518295040'
      // }
      this.shopId = this.searchObj.orgGuid
      const res = await voucherDetail(this.searchObj)
      if (res.data.status !== 200) return this.$Message.error(`${res.data.error}`)

      let detail = res.data.data || {}
      if (detail.changeType === 'STOCK_IN' || detail.changeType === 'RESTOCK') {
        detail.changeType = '入库单'
      } else {
        detail.changeType = '出库单'
      }
      let arr = ((res.data.data && res.data.data.goodsList) || []).map(item => {
        if (detail.changeItem === 'IN_DEVICE') {
          item.goodsName = item.whName
        }
        return item
      })
      this.detail = detail
      this.resData = arr
    },
    async getShopList () {
      const res = await getShopList({
        permissionCode: 'moms:scm:repairview', // 查看普通订单
        merchantId: this.$store.state.user.merchantId, // 商户id
        offset: 0,
        limit: 9999
      })
      if (res.data.status !== 200) return this.$Message.error(`${res.data.error}`)

      this.shopList = res.data.data || []
    }
  }
}
</script>
<style lang="less" scoped>
.configuration-management-new {
  // display: flex;
  // flex-direction: column;
  // min-height: 100%;
  // min-width: 1082px;
  // .from {
  //   margin-top: 24px;
  // }
  .configuration-management-new-edit {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: -4px;
  }
  .button_active {
    border: 1px solid #2d8cf0;
  }
  .search-btn {
    width: 80px;
  }
  .table_content {
    padding: 20px;
  }
  .sort_input {
    width: 100px;
  }
  .table-border-none {
    td {
      border: none;
      background: rgb(248, 248, 249);
    }
  }
  .ivu-table:before {
    content: '';
    width: 100%;
    height: 0px;

  }
  .ivu-table:after {
    content: '';
    width: 0px;
    height: 100%;
  }
}
</style>
